<template>
	<view class="details">
		<view class="detailsHead">
			<view class="detailsHead-main">
				<view class="detailsHead-main-left">
					<view class="detailsHead-state">
						<!-- {{allMsg.orderState | changeorderState}} -->
						<text v-if="allMsg.orderState == 1">待发货</text>
						<text v-else-if="allMsg.orderState == 2">待发货</text>
						<text v-else-if="allMsg.orderState == 3">已发货</text>
						<text v-else-if="allMsg.orderState == 4">已发货</text>
					</view>
					<view class="detailsHead-time">
						下单时间：{{allMsg.createTime}}
					</view>
				</view>
				<image v-if="allMsg.orderState == 1 || allMsg.orderState == 2" class="detailsHead-main-img"
					src="https://www.zzzsyh.com/applets/agent/agent/shop2.png" mode=""></image>
				<image v-else class="detailsHead-main-img2" src="https://www.zzzsyh.com/applets/agent/agent/shop3.png" mode=""></image>
			</view>

			<view class="detailsHead-address">
				<view class="detailsHead-address-left">
					<image class="detailsHead-address-left-img" src="https://www.zzzsyh.com/applets/agent/agent/address.png" mode="">
					</image>
				</view>
				<view class="detailsHead-address-right">
					<view class="detailsHead-address-right-top font_blod">
						<text>{{allMsg.orderName}}</text>
						<text style="margin-left: 24rpx;">{{allMsg.orderPhone}}</text>
					</view>
					<view class="detailsHead-address-right-btm">
						{{allMsg.orderAddress}}
					</view>
				</view>
			</view>
		</view>
		<view class="detailsTitle">
			<text class="detailsTitle-txt1"></text>
			<text class="detailsTitle-txt2 font_blod">预定清单</text>
		</view>
		<view class="detailsMain">
			<view class="detailsMain-li" v-for="(item, index) of allMsg.zsyhStoreOrderRelList" :key="index">
				<view class="detailsMain-li-left">
					<image class="detailsMain-li-left-img" @click="previewImage(item.attributeLogo, index)" :src=item.attributeLogo mode=""></image>
				</view>
				<view class="detailsMain-li-right">
					<view class="detailsMain-li-right-one font_blod">
						{{item.attributeName}}
					</view>
					<view class="detailsMain-li-right-two">
						<text v-if="item.attributeIsPost == 1" class="detailsMain-li-right-two-txt">包邮 偏远地区补差价</text>
						<text class="baoyou-no" v-else>不包邮</text>
					</view>
					<view class="detailsMain-li-right-three">

						<view class="">
							<!-- <text class="detailsMain-li-right-three-box-danwei">单价：</text> -->
							<text class="detailsMain-li-right-three-box-money">￥</text>
							<text class="detailsMain-li-right-three-box-num">{{item.orderPrice}}</text>
							<text class="detailsMain-li-right-three-box-unit">/{{item.partsUnit}}</text>
						</view>
						<view class="detailsMain-li-right-three-box">
							<text class="detailsMain-li-right-three-box-danwei">x</text>
							<text v-if="item.orderSellCount"
								class="detailsMain-li-right-three-box-num">{{item.orderSellCount}}</text>
							<text v-else class="detailsMain-li-right-three-box-num">{{item.orderCount}}</text>
							<text class="detailsMain-li-right-three-box-unit">{{item.partsUnit}}</text>
						</view>
					</view>
					<!-- <view class="detailsMain-li-right-four">
						<text class="detailsMain-li-right-four-txt1">小计:</text>
						<text
							class="detailsMain-li-right-four-txt2">￥{{NumberMul(item.orderCount, item.orderPrice)}}</text>
					</view> -->
				</view>
			</view>
		</view>
		<view class="details-btn">
			<view class="details-btn-box" v-if="allMsg.orderState == 1 || allMsg.orderState == 2">
				<image class="details-btn-img" src="https://www.zzzsyh.com/applets/agent/agent/yuDing-1.png" mode=""></image>
				<view class="details-btn-box-cen">
					<view class="flex">
						<text class="details-btn-title">合计：</text>
						<view class="details-btn-txt2">
							<text style="font-size: 28rpx;">￥</text>
							<text>{{getmoneyAll}}</text>
						</view>
					</view>
					<view class="details-btn-box-cen-btm">
						共{{getNumAll}}个商品
					</view>
				</view>
				<view class="details-btn-box-btn font_blod" @click="cli_fh">
					确定
				</view>
			</view>
			<view class="details-btn-box" v-else>
				<image class="details-btn-img" src="https://www.zzzsyh.com/applets/agent/agent/yuDing-1.png" mode=""></image>
				<view class="details-btn-box-cen">

					<view class="details-btn-box-cen-btm">
						共{{getNumAll}}个商品
					</view>
				</view>
				<view class="flex" style="margin-right: 48rpx;">
					<text class="details-btn-title">合计：</text>
					<view class="details-btn-txt">
						<text style="font-size: 28rpx;">￥</text>
						<text>{{getmoneyAll}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="pop-box">
				<view class="pop-box-img">
					<image class="pop-box-imgg" src="https://www.zzzsyh.com/applets/agent/agent/jiedan_success.png" mode=""></image>
				</view>
				<view class="pop-box-title">
					发货成功
				</view>
				<view class="pop-box-btn" @click="cli_ok">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../../api/index.js'
	export default {
		data() {
			return {
				id: '',
				allMsg: {
					orderState: '',
					createTime: '',
					orderName: '',
					orderPhone: '',
					orderAddress: '',
					zsyhStoreOrderRelList: [],
				}
			}
		},
		onLoad(val) {
			if (val.id) {
				this.id = val.id
			}
		},
		onShow() {
			this.getStorePartsOrderDetails(this.id)
			
		},
		mounted() {},
		computed: {
			getNumAll() {
				var list = this.allMsg.zsyhStoreOrderRelList
				let _that = this
				var numAll = 0
				if (list) {
					for (var i = 0; i < list.length; i++) {
						numAll = _that.NumberAdd(numAll, list[i].orderCount)
					}
				}
				return numAll
			},
			getmoneyAll() {
				var list = this.allMsg.zsyhStoreOrderRelList
				let _that = this
				console.log(list, 99999);
				var moneyAll = 0
				if (list) {
					for (var i = 0; i < list.length; i++) {
						let money = _that.NumberMul(list[i].orderPrice, list[i].orderCount)
						moneyAll = _that.NumberAdd(moneyAll, money)
					}
				}

				console.log(moneyAll);
				return moneyAll
			}
		},
		methods: {
			// 图片预览
			previewImage(item, index){
				console.log(item);
				let lis = item.split()
				wx.previewImage({
				  current: 0, // 当前显示图片的http链接
				  urls: lis // 需要预览的图片http链接列表
				})
			},
			// 点击发货
			cli_fh() {
				this.deliverStorePartsOrder()
			},
			deliverStorePartsOrder() {
				let orderId = this.allMsg.id
				uni.request({
					url: allapi.deliverStorePartsOrder,
					data: {
						orderId: orderId
					},
					success: (res) => {
						console.log(res);
						// uni.showToast({
						// 	title: res.data.msg,
						// 	icon: 'none'
						// })
						this.$refs.popup.open()
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 发货成功 关闭弹窗
			cli_ok () {
				this.$refs.popup.close()
				setTimeout(() => {
					uni.navigateBack()
				}, 500)
			},
			// 获取详情
			getStorePartsOrderDetails(id) {
				uni.request({
					url: allapi.getStorePartsOrderDetails,
					data: {
						orderId: id
						// id: "990420418223411200"
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.allMsg = dat
					}
				})
			}
		},
		filters: {
			changeorderState(val) {
				if (val == 1) {
					return '待接单'
				} else if (val == 2) {
					return '待发货'
				} else if (val == 3) {
					return '已发货'
				} else if (val == 4) {
					return '已发货'
				}
			}
		}
	}
</script>

<style scoped>
	.flex {
		display: flex;
		align-items: center;
	}
	.details {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
	}

	.detailsHead {
		height: 302rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/17.png');
		background-size: 100%;
		background-repeat: no-repeat;
		padding-top: 0.1rpx;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.detailsHead-main {
		flex: 1;
		display: flex;
		justify-content: space-between;
	}

	.detailsHead-main-left {
		flex: 1;
	}

	.detailsHead-main-img {
		width: 256rpx;
		height: 210rpx;
		margin-right: 38rpx;
	}

	.detailsHead-main-img2 {
		width: 266rpx;
		height: 176rpx;
		margin-right: 38rpx;
	}

	.detailsHead-state {
		font-weight: 600;
		font-size: 42rpx;
		color: #FFFFFF;
		margin-left: 48rpx;
		margin-top: 24rpx;
		line-height: 58rpx;
	}

	.detailsHead-time {
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 12rpx;
		margin-left: 48rpx;
		line-height: 34rpx;
	}

	.detailsHead-address {
		/* margin: 26rpx 24rpx 0; */
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 24rpx;
		border-radius: 16rpx;
		position: absolute;
		width: 654rpx;
		bottom: 0;
		left: 24rpx;

	}

	.detailsHead-address-left-img {
		width: 40rpx;
		height: 40rpx;
	}

	.detailsHead-address-right {
		flex: 1;
		margin-left: 24rpx;
	}

	.detailsHead-address-right-top {
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		line-height: 44rpx;
	}

	.detailsHead-address-right-btm {
		margin-top: 16rpx;
		font-size: 28rpx;
		color: #666666;
		font-weight: 400;
		line-height: 40rpx;
	}

	.detailsTitle {
		display: flex;
		align-items: center;
		margin: 26rpx 0;
	}

	.detailsTitle-txt1 {
		width: 10rpx;
		height: 34rpx;
		background: #28CD50;
		border-radius: 5rpx;
		display: block;
		margin-left: 24rpx;
	}

	.detailsTitle-txt2 {
		font-size: 32rpx;
		color: #333333;
		margin-left: 24rpx;
	}

	.detailsMain {
		flex: 1;
		background: #FFFFFF;
		margin: 0 24rpx;
		overflow: auto;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		padding-bottom: 120rpx;
	}

	.detailsMain-li {
		padding: 24rpx 0;
		margin: 0 32rpx;
		border-bottom: 2rpx solid #EEEEEE;
		display: flex;
	}

	.detailsMain-li-left-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		background: #EEEEEE;
	}

	.detailsMain-li-right {
		flex: 1;
		margin-left: 32rpx;
	}

	.detailsMain-li-right-one {
		color: #333333;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.detailsMain-li-right-two {
		margin-top: 16rpx;
		height: 34rpx;
	}

	.detailsMain-li-right-two-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: #28CD50;
		line-height: 34rpx;
		padding: 0 12rpx;
		border-radius: 6rpx;
		border: 2rpx solid #28CD50;
	}

	.detailsMain-li-right-three {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.detailsMain-li-right-three-box-danwei {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.detailsMain-li-right-three-box-money {
		font-size: 24rpx;
		color: #EF691C;
	}

	.detailsMain-li-right-three-box-num {
		font-size: 32rpx;
		color: #EF691C;
	}

	.detailsMain-li-right-three-box-unit {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.detailsMain-li-right-four {
		display: flex;
		justify-content: flex-end;
		margin-top: 22rpx;
	}

	.detailsMain-li-right-four-txt1 {
		font-size: 28rpx;
		color: #333333;
	}

	.detailsMain-li-right-four-txt2 {
		font-size: 32rpx;
		color: #EF691C;
	}

	.details-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 68rpx;
		width: 100%;
		z-index: 666;
	}

	.details-btn-box {
		width: 686rpx;
		padding: 0 16rpx;
		height: 120rpx;
		background: #313131;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.details-btn-img {
		width: 74rpx;
		height: 94rpx;
	}

	.details-btn-box-cen {
		margin-left: 16rpx;
		flex: 1;
	}

	.details-btn-title {
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: 400;
	}

	.details-btn-txt {
		font-size: 36rpx;
		color: #FF9300;
		flex: 1;
		text-align: right;
	}
	.details-btn-txt2 {
		font-size: 36rpx;
		color: #FF9300;
	}

	.details-btn-box-cen-btm {
		font-size: 24rpx;
		color: #BBBBBB;
		font-weight: 400;
	}

	.details-btn-box-btn {
		width: 168rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		background: linear-gradient(90deg, #2ACE52 0%, #1DC248 100%);
		border-radius: 34rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.pop-box {
		width: 416rpx;
		height: 392rpx;
		background: linear-gradient(180deg, #F3E2D4 0%, #FAF4F0 100%);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
		padding-top: 0.1rpx;
	}

	.pop-box-img {
		margin-top: 32rpx;
	}

	.pop-box-imgg {
		width: 216rpx;
		height: 156rpx;
	}

	.pop-box-title {
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
	}

	.pop-box-btn {
		width: 272rpx;
		height: 80rpx;
		background: #C1814E;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		color: #F8EEE6;
		font-size: 28rpx;
		margin-top: 48rpx;
	}
</style>
